<template>
  <div>
    <div class="main-box">
            <div class="main">
                <!-- 手机商品展示区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">手机</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to>
                                <img :src="$target +'public/imgs/phone/phone.png'"/>
                            </router-link>
                        </div>
                        <div class="list">
                            <my-list :listData="phoneList"></my-list>
                        </div>
                    </div>
                </div>
                <!-- 家电商品展示区域 -->
                <div class="appliance" id="promo-menu">
                    <div class="box-hd">
                        <div class="title">家电</div>
                        <div class="more">
                            <div class="myMenu">
                                <ul>
                                    <li :class="applianceActive == 1 ? 'active':''"
                                        @mouseover="applianceMouseOver($event,1)">热门</li>
                                    <li :class="applianceActive == 2 ? 'active':''"
                                        @mouseover="applianceMouseOver($event,2)">电视</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img :src="$target +'public/imgs/appliance/appliance-promo1.png'"/>
                                </li>
                                <li>
                                    <img :src="$target +'public/imgs/appliance/appliance-promo2.png'"/>
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <my-list :listData="applianceHotList"></my-list>
                        </div>
                    </div>
                </div>
                <!-- 配件商品展示区域 -->
                <div class="accessory">
                    <div class="box-hd">
                        <div class="title">配件</div>
                        <div class="more">
                            <div class="myMenu">
                                <ul>
                                    <li :class="partsActive == 1 ? 'active':''" @mouseover="partsMouseOver($event,1)">
                                        热门
                                    </li>
                                    <li :class="partsActive == 2 ? 'active':''" @mouseover="partsMouseOver($event,2)">
                                        保护套
                                    </li>
                                    <li :class="partsActive == 3 ? 'active':''" @mouseover="partsMouseOver($event,3)">
                                        充电器
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt/>
                                </li>
                                <li>
                                    <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt/>
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <my-list :listData="partsHotList"></my-list>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- <div class="TWODIV">
      <span class="title">手机</span>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" alt />
        </dt>
        <dd>
          <my-list :listData="cellphone"></my-list>
        </dd>
      </dl>
    </div>
    <div class="TWODIV">
       <div class="ThreeDiv">
      <span class="title">家电</span>
          <p>
            <span class="span1">热门</span>
            <span class="span2">电视影音</span>
          </p>
      </div>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png" alt />
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" alt />
        </dt>
        <dd>
          <my-list :listData="appliances"></my-list>
        </dd>
      </dl>
    </div>
    <div class="TWODIV">
        <div class="ThreeDiv">
      <span class="title">配件</span>
          <p>
            <span class="span3">热门</span>
            <span class="span1" >保护套</span>
            <span class="span2" >充电器</span>
          </p>
      </div>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png" alt />
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png" alt />
        </dt>
        <dd>
          <my-list :listData="accessories"></my-list>
        </dd>
      </dl>
    </div> -->
</template>
<script>
import API from "../api/homeApi";
export default {
  data() {
    return {
      cellphone: [],
      appliances: [],
      accessories: []
    };
  },
  created() {
    this.callsFig();
  },
  methods: {
    async callsFig() {
      let res = await API.getHotProduct({ categoryName: ["手机"] });
      let ress = await API.getHotProduct({
        categoryName: ["电视机", "空调", "洗衣机"]
      });
      let resss = await API.getHotProduct({
        categoryName: ["保护套", "保护膜", "充电器", "充电宝"]
      });
      this.cellphone = res.Product;
      this.accessories = resss.Product;
      this.appliances = ress.Product;
    },
  }
};
</script>
<style lang="scss" scoped>
.TWODIV {
  display: flex;
  flex-direction: column;
}
.title {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-left: 78px;
}
dl {
  display: flex;
  width: 90%;
  height: 735px;
  margin: auto;
  background-color: #e9eef3;

  dt {
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    img {
      padding-bottom: 23px;
      width: 276px;
      // height: 357px;
    }
  }
  dd {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    ul {
      width: 100%;
      height: 103%;
      padding: 0;
      justify-content: space-between;
      flex-wrap: wrap;
      display: flex;
    
      li {
        margin-left: 20px;
        background: white;
        width: 23%;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        align-items: center;
        justify-content: center;
        a {
          font-size: 18px;
          color: #333;
          text-decoration: none;
          font-weight: bold;
        }
        img {
          width: 210px;
          height: 210px;
        }
        .oneP {
          font-size: 12px;
          color: #b0b0b0;
        }
        p {
          margin-top: 14px;
          .oneSpan {
            color: red;
            margin-right: 13px;
          }
          .twoSpan {
            text-decoration: line-through;
            color: #b0b0b0;
          }
        }
      }
    }
  }
}
.ThreeDiv{
  display: flex;
  width: 100%;
  justify-content: space-between;
  .span1{
      float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-right: 20px;
  }
  .span2{
      float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-right: 94px;

  }
  .span3{
      float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-right: 20px;

  }
}

</style>